<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>我的报名</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f0f0f0;
        }

        .h20 {
            height: 0.5rem;
            background: #f0f0f0;
        }


        /* 数据 */
        .enshrine .aui-list-item-media {
            width: 4rem;
        }
        .aui-list .aui-list-item-media {
          padding: 0.75rem 0.75rem 0.75rem 0;
        }
        .enshrine .aui-list-item-inner .aui-list-item-title {
          color: #333;
          font-size: 0.9rem;
        }
        .enshrine .aui-list-item-inner .aui-info-item,.enshrine .registration_txtBot {
          width: 100%;
          color: #999;
          font-size: 0.7rem;
          display: block;
        }
        .enshrine .aui-list-item-inner .aui-info-item span {
          color: #ff9800;
          float: right;
        }
        .enshrine .aui-media-list .aui-list-item-inner {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-box-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
        }
        .enshrine ul,.enshrine ul li:nth-of-type(1),.enshrine ul li:nth-last-of-type(1) {
          background-size: 0;
        }
        .aptitude {
          padding: 0 0.75rem;
          background-color: #fff;
        }
        .aptitude_title {
          padding: 0.75rem 0;
          color: #333;
          font-size: 0.8rem;
          border-bottom: 1px solid #e8e8e8;
        }
        .aptitude_content {
          padding: 0.75rem 0;
        }
        .aptitude_content h5 {
          color: #333;
          font-size: 0.7rem;
        }
        .consult {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          text-align: center;
          color: #fff;
          background-color: #2997e4;
          height: 2rem;
          line-height: 2rem;
          font-size: 1rem;
        }
        .aptitude_box {
          padding-bottom: 3rem;
        }
        .itemIco {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
        }
    </style>
</head>

<body>
  <div id="app" v-cloak>
  <!-- 第一部分 -->
    <div class="aui-content enshrine">
        <ul class="aui-list aui-media-list">
            <li class="aui-list-item">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media">
                        <!-- <img src="../../image/firstpage/ds@3x.png"> -->

                        <div v-if="info.head_img" class="itemIco" :style="'background: url('+ info.head_img +') center/cover no-repeat'"></div>
                        <div v-else class="itemIco" style="background: url(../../image/wdr@3x.png) center/cover no-repeat"></div>
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">{{info.doctorname}}</div>
                        </div>
                        <div class="aui-info aui-margin-t-5" style="padding: 0;width: 100%;">
                            <div class="aui-info-item">{{info.desk}} {{info.post}}<span v-if="online == 0" style="color: #999">离线</span><span v-else-if="online == 1">在线</span></div>
                        </div>
                        <div class="aui-list-item-text registration_txtBot">
                            {{info.hospitalname}}
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="h20"></div>

    <!-- 第二部分 -->
    <div class="aptitude_box">
      <div class="aptitude">
          <div class="aptitude_title">
              认证资质
          </div>
          <div class="aptitude_content">
            <h5>从业{{info.time}}年</h5>
            <h5><img :src="info.credentials" alt=""></h5>
          </div>
      </div>
      <div class="h20"></div>

      <div class="aptitude">
          <div class="aptitude_title">
              擅长方向
          </div>
          <div class="aptitude_content">
            <h5>{{info.speciality}}</h5>
          </div>
      </div>
      <div class="h20"></div>

      <div class="aptitude">
          <div class="aptitude_title">
              专家简介
          </div>
          <div class="aptitude_content">
            <h5>从业{{info.time}}年</h5>
            <h5>{{info.introduces}}</h5>
          </div>
      </div>
    </div>


    <div class="consult" @click="to_chat(info.userid,info.doctorname)">
      咨询
    </div>
    </div>
</body>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>


//打开聊天窗口
function to_chat(id, name) {
  api.openWin({
    name: 'user_info_' + id,
    url: '../forth_frame/user_info_details_win.html',
    pageParam: {
      id: id,
      name: name,
      chat_type:'PRIVATE'
    }
  });
}


apiready = function() {

var app = new Vue({
  el: '#app',
  data: {
    id: 0,
    info: {},
    online: 0
  },
  created: function() {
    var $_this = this;
    $_this.id = api.pageParam.id
    $_this.online = api.pageParam.online
    // console.log($_this.id)
    api.ajax({
      url: window.Url.getCertificationDetail + $_this.id,
      timeout: 300,
    }, function(ret, err) {
        if (ret) {
            console.log(JSON.stringify(ret));
            $_this.info = ret.data

        } else {
            api.alert({ msg: JSON.stringify(err) });
        }
    })
  },
  methods: {
  }
})
}
</script>
</html>
